<template>
  <Modal
    :visible="visible"
    closable
    okText="确认"
    cancelText="取消"
    @ok="handleSubmit"
    @cancel="handleClose"
    title="二级验证"
  >
    <div class="text-red-500 text-14px mb-10px text-sm">因修改域名会对业务产生影响，因此需进行双因素校验</div>
    <Form :model="formState" ref="formRef">
      <FormItem :rules="[{ required: true, message: '请填写密码' }]" name="password" label="密码" class="">
        <InputPassword
          type="password"
          v-model:value="formState.password"
          placeholder="请输入当前操作用户密码"
          class="w-400px"
          width="100px"
        >
        </InputPassword>
      </FormItem>
      <FormItem required label="验证码" class="w-100">
        <Verification
          :selectOptions="[
            { value: 'PHONE', label: '手机' },
            { value: 'EMAIL', label: '邮箱' },
          ]"
          class="w-full"
          :limitTimer="60"
          :buttonFunction="sendVerificationCodeHandler"
          ref="verficationRef"
        />
      </FormItem>
    </Form>
  </Modal>
  <SuccessModal />
</template>

<script lang="ts" setup>
import { Modal, Form, FormItem, InputPassword } from 'ant-design-vue';
import { ref, defineExpose } from 'vue';
import Verification from '/@/components/VerificationCode/VerificationCode.vue';
import SuccessModal from './successModal.vue';
import { sendVerificationCode } from '/@/api/sys/userInfo';
import { getUserId } from '../../../../hooks/globVar/index';

const props = defineProps({
  pageType: String,
});

const emits = defineEmits(['success']);
const visible = ref<boolean>(false);
const formState = ref({
  password: undefined,
  code: undefined,
});
const formRef = ref(null);
const verficationRef = ref(null);

const openModal = () => {
  visible.value = true;
};
const closeModal = () => {
  visible.value = false;
};

const sendVerificationCodeHandler = () => {
  const type = verficationRef.value.getVerficationType();
  const userId = getUserId();
  sendVerificationCode({ type, userId, pageType: props.pageType });
};

const handleSubmit = async () => {
  formState.value.code = verficationRef.value.getVerificationCode();
  await formRef.value.validateFields();
  emits('success', formState.value);
};

const clearForm = () => {
  formState.value = {
    password: undefined,
    code: undefined,
  };
  verficationRef.value.clearCode();
};
const handleClose = () => {
  clearForm();
  closeModal();
};

defineExpose({
  openModal,
  closeModal,
  clearForm,
});
</script>

<style lang="less" scoped></style>
